<template>
	<a-drawer v-model:open="visible" ref="employeeDetailModalRef" class="edit-drawer modal-fixed-bottom"
		root-class-name="root-customer-drawer" width="800px" :closable="false" @close="onClose">
		<div class="closeable" @click="onClose">{{ $t('self.closeButton') }}</div>
		<div class="modal-header">{{ title }}</div>
		<a-form :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol"
			@finish="onSubmit">
			<a-spin :spinning="formLoading">
				<a-form-item :label="$t('self.notification.tips3')" name="title">
					<a-input allow-clear v-model:value="formState.title" :placeholder="$T('self.pleaseInput') + $T('self.notification.tips3')" />
				</a-form-item>
				<a-form-item :label="$T('self.notification.tips2')" name="content">
				  <a-textarea
					v-model:value="formState.content"
					:rows="6"
					v-if="mode !== 'show'"
					:max-length="500"
					show-count
					:placeholder="$T('self.pleaseInput') + $T('self.notification.tips2')"
				  />
				</a-form-item>
			</a-spin>
			<div class="base-flex base-rows base-align-items-center base-justify-content-center footer">
				<a-button type="primary" html-type="submit">{{ $t('self.submitButton') }}</a-button>
				<a-button class="base-ml10" @click="onClose">{{ $t('self.cancelButton') }}</a-button>
			</div>
		</a-form>
	</a-drawer>
</template>

<script setup>
	import {
		computed,
		getCurrentInstance,
		onMounted,
		ref
	} from 'vue'
	import {
		message
	} from 'ant-design-vue'
	const {
		proxy
	} = getCurrentInstance()
	const $TOOL = proxy.$TOOL
	const $T = proxy.$t
	const $API = proxy.$API
	const emit = defineEmits(['close', 'ok'])

	const visible = ref(false)
	const formLoading = ref(false)
	// 模式，add新增，show查看，edit编辑
	const mode = ref('add')
	const labelCol = {
		style: {
			width: '150px',
		},
	};
	const wrapperCol = {
		span: 16,
	};
	const title = ref()
	const formState = ref({
		"title": "",
		"content": "",
		"id": ""
	})
	const roleArrOptions = ref([])
	const orgOptions = ref([])
	const countryAuthorizeOptions = ref([])
	const formRules = ref({
		title: [{
			required: true,
			message: $T('self.pleaseInput') + $T('self.notification.tips3'),
			trigger: 'change'
		}],
		content: [{
			required: true,
			message: $T('self.pleaseInput') + $T('self.notification.tips2'),
			trigger: 'change'
		}],
	})
	const onSubmit = (values) => {
		if (mode.value === 'add') {
			const params = {
			  title: formState.value.title,
			  content: formState.value.content
			}
			// 添加
			$API.backend.notification.insertNotifications.post(params).then(res => {
				message.success($T('self.message.success'))
				onReset()
				visible.value = false
				emit('ok')
			}).catch(err => {
				message.error(err.msg);
			})
		} else {
			// console.log(formState.value.title)
			// console.log(formState.value.content)
			// console.log(formState.value.id)
			const params = {
			  title: formState.value.title,
			  content: formState.value.content,
			  id: formState.value.id
			}
			// 修改
			$API.backend.notification.updateNotifications.post(params).then(res => {
				message.success($T('self.message.success'))
				onReset()
				visible.value = false
				emit('ok')
			}).catch(err => {
				message.error(err.msg);
			})
		}
	};

	const onReset = () => {
		// 清空内容
		formState.value = {
			"title": "",
			"content": "",
			"id": ""
		}
	}

	const onClose = () => {
		onReset()
		visible.value = false
		emit('close')
	}

	const add = () => {
		title.value = $T('self.notification.tips1')
		mode.value = 'add'
		visible.value = true
	}

	const edit = async (record) => {
		// console.log('edit 收到 record', record)
		title.value = $T('self.notification.tips10')
		mode.value = 'edit'
		visible.value = true
		formLoading.value = true

		const params = {
			...record
		}
		params.title = params.title ? params.title : ""
		params.content = params.content ? params.content : ""
		params.id = params.ID ? params.ID : ""
		$TOOL.array.cloneExistKey(formState.value, params)


		formLoading.value = false
		// console.log(formState.value)
	}

	const show = (record) => {
		mode.value = 'show'
		visible.value = true
		formState.value = { ...record }
		// formState.value = record
	}

	// 子组件中要通过defineExpose将方法暴露给父组件
	defineExpose({
		add,
		edit,
		show
	})
</script>

<style lang="scss" scoped>
	.edit-drawer {
		position: relative;

		.closeable {
			@include closeable;
		}
	}
</style>